<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css" integrity="sha256-2H3fkXt6FEmrReK448mDVGKb3WW2ZZw35gI7vqHOE4Y=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"example.com","root":"/","images":"/images","scheme":"Pisces","version":"8.7.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"Searching...","empty":"We didn't find any results for the search: ${query}","hits_time":"${hits} results found in ${time} ms","hits":"${hits} results found"}}</script><script src="/js/config.js"></script>
<meta property="og:type" content="website">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="http://example.com/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="http://example.com/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":true,"isPost":false,"lang":"en","comments":"","permalink":"","path":"index.html","title":""}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>Hexo</title>
  




  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="Toggle navigation bar" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">Hexo</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu">
        <li class="menu-item menu-item-首页"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li>
        <li class="menu-item menu-item-分类"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li>
        <li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>Archives</a></li>
  </ul>
</nav>




</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-overview-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          Table of Contents
        </li>
        <li class="sidebar-nav-overview">
          Overview
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-overview">
            <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">John Doe</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">20</span>
          <span class="site-state-item-name">posts</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">12</span>
        <span class="site-state-item-name">categories</span></a>
      </div>
  </nav>
</div>



          </div>
        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="Back to top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner index posts-expand">

    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/03/20/JS%E6%A0%B8%E5%BF%83%E9%AA%A8%E6%9E%B6/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="John Doe">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/03/20/JS%E6%A0%B8%E5%BF%83%E9%AA%A8%E6%9E%B6/" class="post-title-link" itemprop="url">JS骨架梳理</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2021-03-20 19:20:05" itemprop="dateCreated datePublished" datetime="2021-03-20T19:20:05+08:00">2021-03-20</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">In</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/js%E6%A0%B8%E5%BF%83/" itemprop="url" rel="index"><span itemprop="name">js核心</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h2 id="闭包体系"><a href="#闭包体系" class="headerlink" title="闭包体系"></a>闭包体系</h2><h3 id="切入点词法作用域"><a href="#切入点词法作用域" class="headerlink" title="切入点词法作用域"></a>切入点词法作用域</h3><ol>
<li><p>首先我需要从作用域的底层机制说起，首先在 V8 引擎中是有编译阶段的，</p>
<blockquote>
<h2 id="V8-引擎如何执行一段代码"><a href="#V8-引擎如何执行一段代码" class="headerlink" title="V8 引擎如何执行一段代码"></a>V8 引擎如何执行一段代码</h2></blockquote>
<blockquote>
<h3 id="编译阶段"><a href="#编译阶段" class="headerlink" title="编译阶段"></a>编译阶段</h3><ol>
<li>那在执行一段代码执行之前，得做些准备工作，</li>
<li>具体就是需要准备<strong>基础环境</strong>。</li>
<li>那现在有了基础环境后，就可以来执行这个代码。</li>
<li>由于 v8 引擎并不识别代码，所以需要来，将其<strong>结构化</strong>， 转化为 <strong>AST 树</strong>，再<strong>最终转换为字节码</strong>，也就是说<strong>中间代码</strong>（介于 AST 和机器码中间的一种产物） ，但是 v8 引擎为了节省资源，它不会去将声明的函数内部的所有代码转换为中间代码。很<strong>懒惰</strong>，所以又称惰性解析阶段。只有当其函数调用的时候才会去将其内部的代码，转换为中间代码</li>
</ol>
<h3 id="执行阶段"><a href="#执行阶段" class="headerlink" title="执行阶段"></a>执行阶段</h3><ol>
<li>同时要说明一点由于 V8 引擎属于jit，所以会有一个监控器，来判断是否有重复代码执行，如果有将其标记为热点代码，将其转换为二进制代码，当下次再次执行，解释器直接执行优化过的代码，提高效率。</li>
</ol>
</blockquote>
<blockquote>
<h3 id="字节码"><a href="#字节码" class="headerlink" title="字节码"></a>字节码</h3><p>所以时间上，早期编译为二进制代码太慢，所以时间上更快，空间上，所占内存小，早期为了防止重复编译将结果，缓存，而字节码所占空间很少。</p>
</blockquote>
<blockquote>
</blockquote>
<blockquote>
<h3 id="v8-引擎如何来执行一段代码"><a href="#v8-引擎如何来执行一段代码" class="headerlink" title="v8 引擎如何来执行一段代码"></a>v8 引擎如何来执行一段代码</h3></blockquote>
</li>
<li><p>这里还有一点就是此时引擎会在当前的作用域去寻找有没有所声明的变量，如果有那就忽略它，这也是为什么，var 可以重复声明的本质原因，如果没有的话就将这个变量存放在当前作用域，赋值阶段</p>
</li>
</ol>
<h4 id="如何来叙述闭包"><a href="#如何来叙述闭包" class="headerlink" title="如何来叙述闭包"></a>如何来叙述闭包</h4><ol>
<li>切入点<strong>词法作用域</strong>，那么词法作用域是怎样生成的（此时联想作用域里面有声明了一个变量），那么在编译阶段首先会来判断，当前的作用域有没有这个变量，有了就忽略，继续，没有就直接将变量放置当前作用域内并赋值 undefined.</li>
<li>那你不能光找到它，还得赋值，在当前作用域能找到直接赋值，没找到就不断向外部作用域找形成作用域链。</li>
<li><strong>（谈到作用域本质就联想一个调用栈，里面压入了全局执行上下文，和函数执行上下文））</strong>作用域的<strong>本质</strong>到底是什么，从<strong>表层意思</strong>来讲，它是一套规则，存放相应变量的规则，从本质上来讲，它是当前所处执行上下文，从这一点可以明白，为什么闭包中，可以从内部访问外部的变量，而外部无法访问内部的变量，全局执行上下文首先会推入调用栈中，之后每当调用一个函数，就会将函数上下文推入栈中，所以即便调用栈中，栈顶执行上下文，执行完毕后出栈，但是内部执行上下文依然可以通过，作用域链来访问，但由于栈顶执行上下文出栈了作用域链也被销毁了，所以无法访问调用栈中上下文的变量。</li>
</ol>
<h4 id="补充词法作用域"><a href="#补充词法作用域" class="headerlink" title="补充词法作用域"></a>补充词法作用域</h4><ol>
<li>什么是<strong>词法作用域</strong>，由作用域想到了，作用域链，也就是说查找变量的时候一定是沿着，比如你所定义的位置，然后不断向外去延申，而动态作用域是沿着调用栈去查找的。</li>
<li>补充函数的作用域是执行阶段就会去形成。但是查找一定是沿着定义的作用域，不断向外去延申。</li>
<li>闭包引用的变量一定不会被回收吗，其实不对，当把这个变量直接赋值 null 就会被回收，这样相当于引用了一个空的变量自然会被回收</li>
</ol>
<h3 id="闭包应用。"><a href="#闭包应用。" class="headerlink" title="闭包应用。"></a>闭包应用。</h3><ol>
<li><p>let 定义的 i 会运行 for 的块级作用域中，每次执行一次循环，都会创建一个块级作用域。<br>在这个块级作用域中，你又定义了一个函数，而这个函数又引用了函数外部的 i 变量，那么这就产生了闭包，也就是说，所有块级作用域中的 i 都不会被销毁，你在这里执行了 10 次循环，那么也就创建了 10 个块级作用域，这十个块级作用域中的变量 i 都会被保存在内存中。<br>那么当你再次调用该 a<a href="">n</a> 时，v8 就会拿出闭包中的变量 i，并将其打印出来，因为每个闭包中的 i 值都不同，所以 a<a href="">n</a> 时，打印出来的值就是 n，这个就非常符合直觉了。<br>但是如果你将 for 循环中的 i 变量声明改成 var，那么并不会产生块级作用域，那么函数引用的 i 就是全局作用域中的了，由于全局作用域中只有一个，那么在执行 for 循环的时候，i 的值会一直被改变，最后是 10，所以最终你执行 a<a href="">n</a> 时，无论 n 是多少，打印出来的都是 10. 那么这就是 bug 之源了。</p>
</li>
<li><p>循环打印 1，2，3，4，5<br>和第二种思路比较相似，同样是在 setTimeout 外面再套一层函数，只不过这个函数是一个<strong>立即执行函数</strong> 。利用立即执行函数的入参来缓存每一个循环中的 i 值：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">5</span>; i++) &#123;</span><br><span class="line">    <span class="comment">// 这里的 i 被赋值给了立即执行函数作用域内的变量 j</span></span><br><span class="line">    (<span class="function"><span class="keyword">function</span>(<span class="params">j</span>) </span>&#123;  </span><br><span class="line">        <span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(j);</span><br><span class="line">        &#125;, <span class="number">1000</span>);</span><br><span class="line">    &#125;)(i);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>//就是每一次 settimeout 里的 j 对外部立即执行函数里的变量造成了引用，所以，缓存了这个值，因为 v8 不再回收这个被引用的值了，缓存下来了。</p>
</li>
<li><p>还可以用 promise 来实现闭包</p>
</li>
</ol>
<p>高阶函数</p>
<h3 id="闭包的应用"><a href="#闭包的应用" class="headerlink" title="闭包的应用"></a>闭包的应用</h3><h4 id="模拟私有变量"><a href="#模拟私有变量" class="headerlink" title="模拟私有变量"></a>模拟私有变量</h4><ol>
<li><strong>模拟私有变量</strong>：就是之前像是 Java c++ 这些，有 private 私有变量， 就是不是这个类的其它成员，你无法去访问这些私有变量。</li>
<li>在 js 生成一个类是依赖于这个构造函数，但是你实例化一个类会发现，你通过这个类可以访问到这些这个类的属性，但是这个有一个问题就是说，万一我在这个这个构造函数里定义了一些私密数据，那不就可以在这个对象去访问到这个属性了吗。</li>
<li>用立即执行函数，形成一个闭包，返回一个类，然后将私有属性放在函数里，不去通过 this 来赋值，直接进行赋值操作；a=privatedata，这样外部是无法拿到这个私有变量的。</li>
<li>还可以用symbol来模拟一个私有的变量。</li>
</ol>
<h4 id="偏函数-bind-的实现"><a href="#偏函数-bind-的实现" class="headerlink" title="偏函数 bind 的实现"></a>偏函数 bind 的实现</h4><blockquote>
<h3 id="个人理解"><a href="#个人理解" class="headerlink" title="个人理解"></a>个人理解</h3><ol>
<li><p>二刷理解：</p>
<ol>
<li>第一点： 记住执行 bind 会返回一个函数，为什么为了之后的偏函数的应用，s.（a）（b）</li>
<li>返回的函数需要调用它并且来改变它的 this 指向，利用 apply</li>
<li>此时来考虑一下，类数组的问题，就是说，bind 函数里面有许多参数，被 arguements 所收集，你现在想传参数，但是 arguements 是一个类数组，需要转换为真正的数组，利用 array.propotype.slice.call()</li>
<li>此时 bind 还具有偏函数的特性就是 bind 函数第一个括号内部，偏函数就是在第二个括号里的参数,为什么第一个括号里的参数要截取，因为我不需要第一个括号里面的第一个参数，所以要截取，对于第二个括号，只需要将其转化为数组就好，但是所谓偏函数的本质依然要将其两个参数里的东西转换为一个括号里的参数，所以我们需要合并 concat</li>
<li>可以通过 bind 所返回的函数，实例化一个对象</li>
<li>也就是说你需要在 Bind 所返回的函数里，去判断 this 是否是构造函数的实例，</li>
<li>这里的构造函数指的是 person，不是你返回的函数，而且</li>
</ol>
</li>
</ol>
</blockquote>
<h4 id="柯里化"><a href="#柯里化" class="headerlink" title="柯里化"></a>柯里化</h4><h4 id="防抖节流"><a href="#防抖节流" class="headerlink" title="防抖节流"></a>防抖节流</h4><p>高阶函数</p>
<ol>
<li><strong>高阶</strong>函数是指使用其他函数作为参数、或者返回一个函数作为结果的函数。比如这个 map,reduce 等.</li>
<li><strong>联想记忆</strong>：为什么<strong>高阶</strong>，因为是属于，函数<strong>一等公民</strong>：所以高级—》就是函数可以做数据类型也能做的事情，比如这个，参数和返回值。</li>
</ol>
<h3 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h3><ol start="3">
<li><p>首先来理解这个原型链继承就是将子类的原型对象直接变为，父类的实例，这样就可以通过<strong>原型链实现继承</strong>，从而拿到一些属性和方法，但是无法传递参数，而且会修改原型上的属性和方法，这里要注意一点就是要改变这个子类构造函数的指向，否则就顺着原型链指向了父类构造函数了，这个组合继承，寄生组合继承都要。</p>
</li>
<li><p>对于这个<strong>组合继承</strong>就是通过这个 call/apply 实现继承，首先子类实例一个对象，然后调用这个子类构造函数，之后再去调用这个父构造函数，改变这个父构造函数的 this 指向，这样并可以传递参数，这样，就给子类赋予了父类的属性和方法，并且由于构造函数声明的属性和方法都是私有的所以其它实例无法改变。并且还可以依赖原型链，去拿到这个<strong>父类原型上的方法</strong>，<strong>弊端就是父类构造函数调用了两次，</strong>一次是原型链上的，一次是这个 call 调用父构造函数的时候。</p>
</li>
<li><p><strong>寄生组合继承</strong>：就是由于父构造函数调用了两次所以我需要，通过 object.create(父构造函数的 propotype),就是先来创建一个对象，然后让这个对象的_proto_指向这个参数。这样就跳过了这个父的实例，完美，不过也需要修改构造函数的指向。</p>
</li>
<li><p>``` js<br>function parent(name, sex) {//组合继承<br>  this.name = name<br>  this.sex = sex</p>
<p>  parent.prototype.say = function () {</p>
<pre><code>console.log(111);
</code></pre>
<p>  }<br>}</p>
<p>function child(name, age) {<br>  parent.call(this, name)</p>
<p>}</p>
<p>child.prototype = new parent()//第一次调用这个父构造函数<br>child.prototype.constructor = child//修改这个原型constructor指向</p>
<p>let a = new child()//第二次调用这个父构造函数</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">``` js</span><br><span class="line">function parent(name, sex) &#123;//寄生组合继承</span><br><span class="line">  this.name = name</span><br><span class="line">  this.sex = sex</span><br><span class="line"></span><br><span class="line">  parent.prototype.say = function () &#123;</span><br><span class="line">    console.log(111);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function child(name, age) &#123;</span><br><span class="line">  parent.call(this, name)</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">child.prototype = Object.create(parent.prototype)//修改子类原型对象的__proto__为父构造函数的原型对象实现继承父的原型方法</span><br><span class="line">child.prototype.constructor = child//修改这个原型constructor指向</span><br></pre></td></tr></table></figure></li>
</ol>
<h4 id="ES6-和-ES5-继承的关系"><a href="#ES6-和-ES5-继承的关系" class="headerlink" title="ES6 和 ES5 继承的关系"></a>ES6 和 ES5 继承的关系</h4><ol>
<li>ES5 和 ES6 子类 <code>this</code> 生成顺序不同。ES5 的继承先生成了子类实例，再调用父类的构造函数修饰子类实例，ES6 的继承先生成父类实例，再调用子类的构造函数修饰父类实例。这个差别使得 ES6 可以继承内置对象。</li>
<li><strong>这样记忆</strong>，就是 es5 是我熟悉的先去，生成子类实例，再去调用父构造函数，es6 这个正好相反。简化记忆</li>
<li><a target="_blank" rel="noopener" href="https://muyiy.cn/question/js/7.html">es6 和 es5 的继承</a></li>
</ol>
<h2 id="异步"><a href="#异步" class="headerlink" title="异步"></a>异步</h2><h3 id="async-await"><a href="#async-await" class="headerlink" title="async await"></a>async await</h3><h3 id="Generator"><a href="#Generator" class="headerlink" title="Generator"></a>Generator</h3><h3 id="Promise"><a href="#Promise" class="headerlink" title="Promise"></a>Promise</h3><ol>
<li><a target="_blank" rel="noopener" href="https://juejin.cn/post/6856213486633304078#heading-4">补充 promise 的细节补充及常见看代码读题</a>。</li>
<li>怎么来中断这个 then 的链式调用，首先明确什么时候会去调用 then 也就是说，这成功的时候，那也就是说这个题的本质是让它去，失败，所以的话就是说，主动 reject，之后会去执行，then 里失败的回调，那如果是失败的回调，then 一定是成功状态的 promise 才会去调用，所以失败的回调执行后会变为失败态，所以的话，就是说会终止调用，还可以去主动抛错。然后改变这个当前 promise 的状态。</li>
</ol>
<h2 id="宏任务微任务"><a href="#宏任务微任务" class="headerlink" title="宏任务微任务"></a>宏任务微任务</h2><ol>
<li>首先明确 js 为什么是单线程，一个线程删除 dom，另一个线程添加 dom 到底是删还是不删</li>
<li>联想 左边一个调用栈，右边各一个微任务队列，和宏任务队列，</li>
<li>就是调用栈不断的从队列中取任务，然后再去执行。</li>
<li>为什么会有微任务队列和宏任务队列两种，为了插队，为了让一些任务插队优先执行。让任务执行的时机变的可控。</li>
</ol>
<h4 id="浏览器事件循环机制"><a href="#浏览器事件循环机制" class="headerlink" title="浏览器事件循环机制"></a>浏览器事件循环机制</h4><ol>
<li>首先宏任务（script 整体代码）推入调用栈中，先同步，遇到异步代码分别投放至宏微任务队列，执行所有微任务，然后再去检查宏任务（易错：如果遇到定时器，这个要根据这个设定时间排一个顺序）。</li>
<li>如果我想在异步任务中去更新 dom，应该是包装为微任务，如果是微任务，就是执行后会立即渲染，而宏任务，整体代码（宏）之后微–》渲染更新而此时压根就没有更新 dom，得等下一次任务循环也就意味着，多渲染了一次。</li>
<li>引出这个 vue.nexttick,异步更新，就是不会   立刻去更新，避免多次重复渲染。</li>
<li>那对于需要包装为宏任务的，那就直接派发为任务，默认都包装为微任务依赖于 promise.then</li>
</ol>
<h3 id="js-作用域链"><a href="#js-作用域链" class="headerlink" title="js 作用域链"></a>js 作用域链</h3><ol>
<li>首先想到何时形成。</li>
<li>作用域嵌套的时候就，可以形成这个作用域链了，想象（函数嵌套内部函数引用了外部变量）w–》闭包</li>
<li>同时引出为什么为什么外部变量不能访问到内部的变量。</li>
</ol>
<h3 id="函数式编程"><a href="#函数式编程" class="headerlink" title="函数式编程"></a>函数式编程</h3><ol>
<li>js 更多的是具有函数式编程的特点而不是纯粹的</li>
<li>闭包</li>
<li>偏函数柯里化</li>
<li>高阶函数。</li>
<li>纯<strong>函数</strong>： 三点： <strong>函数</strong>有确定的一个返回值，并且不使用全局的变量，并且不会去修改全局变量。</li>
</ol>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/03/12/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%9E%84%E9%80%A0/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="John Doe">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/03/12/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%9E%84%E9%80%A0/" class="post-title-link" itemprop="url">浏览器</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2021-03-12 22:20:47" itemprop="dateCreated datePublished" datetime="2021-03-12T22:20:47+08:00">2021-03-12</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">In</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E6%B5%8F%E8%A7%88%E5%99%A8/" itemprop="url" rel="index"><span itemprop="name">浏览器</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="浏览器构造"><a href="#浏览器构造" class="headerlink" title="浏览器构造"></a>浏览器构造</h1><h2 id="浏览器的进程"><a href="#浏览器的进程" class="headerlink" title="浏览器的进程"></a>浏览器的进程</h2><h3 id="多进程"><a href="#多进程" class="headerlink" title="多进程"></a>多进程</h3><ul>
<li>发挥浏览器的性能，单进程那不就一次只能执行一个任务吗</li>
<li>一个页面就是一个进程，那单进程，不就一次只能开一个页面吗</li>
<li>并且相互独立，比如我一个页面崩溃了，另一个页面应该是不受影响的，因为进程之间是相互独立的</li>
</ul>
<h3 id="分类"><a href="#分类" class="headerlink" title="分类"></a>分类</h3><ul>
<li><p>渲染进程</p>
<ul>
<li><p>目的</p>
<ul>
<li>渲染htmlcss到页面中，这里为什么要用到这个js</li>
</ul>
</li>
<li><p>包含多个线程</p>
<ul>
<li><p>渲染线程</p>
<ul>
<li><p>dom树</p>
</li>
<li><p>css树</p>
</li>
<li><p>布局树</p>
<ul>
<li>计算其元素布局的位置</li>
</ul>
</li>
<li><p>分层</p>
<ul>
<li><p>为什么</p>
<ul>
<li>将页面拆分多个图层，那其中一个图层发生变动重新进行渲染，其它的图层不会发生变动避免无效渲染</li>
</ul>
</li>
</ul>
</li>
<li><p>光珊化</p>
<ul>
<li>故名思意，将图层转化为图块—再转化为位图（栅格图像）划为多个格子，我只渲染可视区域的并转化为实际像素</li>
</ul>
</li>
<li><p>合成</p>
<ul>
<li>及浏览器将各层信息发送到GPU：进行合成显示到屏幕上</li>
</ul>
</li>
<li><p>transform</p>
<ul>
<li>调用gpu渲染，提升图层</li>
<li>调用了GPU进程进行渲染，而不去调用渲染进程：从而提升了渲染的效率</li>
</ul>
</li>
</ul>
</li>
<li><p>js执行线程</p>
</li>
<li><p>定时器触发线程</p>
<ul>
<li>如果放在js执行线程上，如果它阻塞了，影响定时器的准确度</li>
</ul>
</li>
<li><p>事件触发线程</p>
</li>
<li><p>http异步请求线程</p>
</li>
</ul>
</li>
</ul>
</li>
<li><p>浏览器进程</p>
</li>
<li><p>渲染进程</p>
</li>
<li><p>GPU进程</p>
</li>
<li><p>网络进程</p>
</li>
<li><p>插件进程</p>
</li>
</ul>
<h3 id="重绘重排"><a href="#重绘重排" class="headerlink" title="重绘重排"></a>重绘重排</h3><ul>
<li><p>重绘</p>
<ul>
<li><p>颜色的变动</p>
<ul>
<li>跳过布局树，分层阶段因此渲染消耗小</li>
</ul>
</li>
<li><p>怎么避免</p>
</li>
</ul>
</li>
<li><p>重排</p>
<ul>
<li><p>改变了位置与大小</p>
<ul>
<li>宽高位置变动</li>
<li>dom增加与删除相当于改变了大小</li>
<li>内外边距的改变，可以理解为位置的变动</li>
</ul>
</li>
<li><p>怎么避免</p>
</li>
</ul>
</li>
</ul>
<p><em>XMind - Evaluation Version</em></p>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/03/01/Vue%E5%8E%9F%E7%90%86/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="John Doe">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/03/01/Vue%E5%8E%9F%E7%90%86/" class="post-title-link" itemprop="url">Vue原理</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2021-03-01 21:43:45" itemprop="dateCreated datePublished" datetime="2021-03-01T21:43:45+08:00">2021-03-01</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">In</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/vue/" itemprop="url" rel="index"><span itemprop="name">vue</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="Vue原理"><a href="#Vue原理" class="headerlink" title="Vue原理"></a>Vue原理</h1><h2 id="vue响应式原理"><a href="#vue响应式原理" class="headerlink" title="vue响应式原理"></a>vue响应式原理</h2><h3 id="通俗讲：data-变-视图层更着变"><a href="#通俗讲：data-变-视图层更着变" class="headerlink" title="通俗讲：data 变 视图层更着变"></a>通俗讲：data 变 视图层更着变</h3><h3 id="首先我需要去监听这个data的改变，因为想时刻获取当前最新的data从而触发视图更新的方法"><a href="#首先我需要去监听这个data的改变，因为想时刻获取当前最新的data从而触发视图更新的方法" class="headerlink" title="首先我需要去监听这个data的改变，因为想时刻获取当前最新的data从而触发视图更新的方法"></a>首先我需要去监听这个data的改变，因为想时刻获取当前最新的data从而触发视图更新的方法</h3><ul>
<li><p>依赖于object.propoty.definepropoty</p>
<ul>
<li><p>为对象去定义一个getter和setter </p>
</li>
<li><p>弊端</p>
<ul>
<li><p>无差别，无论嵌套层级多么深的对象都转换为响应式，无条件递归：栈空间消耗大</p>
</li>
<li><p>无法监听对象的新增属性和删除属性d</p>
<ul>
<li>那怎么来解决</li>
</ul>
</li>
<li><p>无法监听数组的方法就是操作数组，调用数组的方法，我无法将其转换为响应式</p>
<ul>
<li><p>为什么无法监听原数组：因为调用数组的方法返回了最新的数组，但是并没有改变其原数组，而我监听的是原数组。</p>
</li>
<li><p>怎么来解决</p>
<ul>
<li><p>由于之前触发数组的方法 无法改变原数组，也就意味着无法触发set –》无法触发视图更新的方法</p>
</li>
<li><p>基本的思路：那我现在就去重写方法，然后去手动调用这个视图更新的方法</p>
</li>
<li><p>通过object.create() 将数组原型进行隔离，不要去干扰改写原数组的原型</p>
<ul>
<li>这个思路就是寄生组合继承的原理</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="虚拟dom"><a href="#虚拟dom" class="headerlink" title="虚拟dom"></a>虚拟dom</h2><h3 id="为什么要用虚拟dom"><a href="#为什么要用虚拟dom" class="headerlink" title="为什么要用虚拟dom"></a>为什么要用虚拟dom</h3><ul>
<li><p>跨平台，因为dom与平台强相关联，因为虚拟dom本质上是js对象，可以进行跨平台操作</p>
<ul>
<li>react-native</li>
<li>weex</li>
<li>都用的是虚拟dom</li>
</ul>
</li>
<li><p>防止无效渲染</p>
</li>
<li><p>子主题</p>
</li>
</ul>
<h3 id="解决了什么问题"><a href="#解决了什么问题" class="headerlink" title="解决了什么问题"></a>解决了什么问题</h3><ul>
<li><p>如果我操作dom前后实际内容没有变化：那没有虚拟dom就白渲染了两次 </p>
</li>
<li><p>操作真实的dom会触发渲染耗费性能，所以用虚拟dom</p>
<ul>
<li><p>渲染为什么耗费性能</p>
<ul>
<li>dom树的构建</li>
<li>css树的构建</li>
<li>render树的构建</li>
<li>布局</li>
<li>绘制等</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="怎么解决的"><a href="#怎么解决的" class="headerlink" title="怎么解决的"></a>怎么解决的</h3><ul>
<li>使用js去模拟dom之后再去通过diff算法计算出最小的变更，之后再去操作真实的dom进行局部渲染。</li>
</ul>
<h3 id="手写虚拟dom树"><a href="#手写虚拟dom树" class="headerlink" title="手写虚拟dom树"></a>手写虚拟dom树</h3><h3 id="从源码的角度来分析虚拟dom视图更新的过程"><a href="#从源码的角度来分析虚拟dom视图更新的过程" class="headerlink" title="从源码的角度来分析虚拟dom视图更新的过程"></a>从源码的角度来分析虚拟dom视图更新的过程</h3><h3 id="diff算法"><a href="#diff算法" class="headerlink" title="diff算法"></a>diff算法</h3><ul>
<li><p>patch(oldvnode,newvnode)</p>
<ul>
<li><p>依赖于patch函数比较新老节点</p>
<ul>
<li><p>新节点不存在，直接删除老节点</p>
<ul>
<li>说明直接删除dom了</li>
</ul>
</li>
<li><p>如果老节点不存在，直接去创建一个新的节点</p>
</li>
<li><p>相同节点直接进入到 patchvnode比较子节点</p>
<ul>
<li><p>怎么来判断是否是相同的节点</p>
<ul>
<li>key</li>
<li>tagname</li>
<li>input还有比较type 类型</li>
</ul>
</li>
<li><p>比较虚拟dom节点内部</p>
<ul>
<li><p>两节点完全相同直接去返回</p>
</li>
<li><p>虚拟dom的children是textnode</p>
<ul>
<li>直接去更新text</li>
</ul>
</li>
<li><p>如不是：</p>
<ul>
<li><p>新节点存在，无旧节点</p>
<ul>
<li>创建新的</li>
</ul>
</li>
<li><p>旧节点存在，新节点不存在</p>
<ul>
<li>删除旧节点</li>
</ul>
</li>
<li><p>新旧dom都存在：调用updatechildren比较子节点差异</p>
<ul>
<li><p>四个方向进行循环比较：依赖对撞指针进行操作</p>
<ul>
<li>先头头比较</li>
<li>尾尾比较</li>
<li>头和尾</li>
<li>尾和头</li>
</ul>
</li>
<li><p>如果找到了相同的元素将其插入到真实dom序列的头部</p>
</li>
<li><p>结束循环后</p>
</li>
<li><p>为什么要有key 如果没有patch逻辑发现，没有相同元素，那就默认直接删除旧dom全部重新生成新dom进行更新，消耗太大</p>
<ul>
<li>tag 标签，基本每次都一一样，而没有Key做为比对，是不够精确的</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p>时间复杂度</p>
<ul>
<li><p>为什么要同层比较</p>
<ul>
<li>原因在于降低时间复杂度</li>
<li>如果先递归到底，然后遍历另一颗树，最后再去排序时间复杂度太高了</li>
</ul>
</li>
</ul>
</li>
<li><p>v-for为什么要有key</p>
<ul>
<li>对于v-for每次都循环出相同的标签，那么没有key做唯一的标识自然无法去判断新旧节点是否相同，他觉得都不相同，只能销毁旧dom去重新创建新dom</li>
</ul>
</li>
</ul>
<h2 id="渲染过程"><a href="#渲染过程" class="headerlink" title="渲染过程"></a>渲染过程</h2><h3 id="模板编译"><a href="#模板编译" class="headerlink" title="模板编译"></a>模板编译</h3><ul>
<li><p>编译为render函数</p>
<ul>
<li>返回虚拟dom</li>
</ul>
</li>
<li><p>基于虚拟dom实现patch 和diff算法寻找最小差异点</p>
</li>
<li><p>Subtopic</p>
</li>
</ul>
<h3 id="整个过程"><a href="#整个过程" class="headerlink" title="整个过程"></a>整个过程</h3><ul>
<li><p>初次渲染</p>
<ul>
<li><p>解析模板为render函数</p>
</li>
<li><p>触发响应式监听data数据</p>
<ul>
<li><p>触发getter</p>
<ul>
<li>如果模板中用到了你所定义的data的话</li>
</ul>
</li>
<li><p>初次不涉及修改自然不会去触发setter</p>
</li>
</ul>
</li>
<li><p>执行render函数，生成相应的虚拟dom，之后再去触发patch（）（diff算法）</p>
</li>
</ul>
</li>
<li><p>更新渲染</p>
<ul>
<li>因为之前对data做了监听，修改后会触发相应的setter</li>
<li>数据变，虚拟dom肯定要变，所以再次调用render函数生成新虚拟dom</li>
<li>再去使用patch函数</li>
</ul>
</li>
<li><p>特点</p>
<ul>
<li><p>异步渲染</p>
<ul>
<li><p>汇总dom的修改</p>
</li>
<li><p>nextttick</p>
<ul>
<li>由于vue是异步渲染因此想拿到最新dom，整个api就是等vue渲染完毕后才去执行相应的回调</li>
</ul>
</li>
<li><p>子主题</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="v-model"><a href="#v-model" class="headerlink" title="v-model"></a>v-model</h2><h3 id="实现数据的双向绑定"><a href="#实现数据的双向绑定" class="headerlink" title="实现数据的双向绑定"></a>实现数据的双向绑定</h3><h3 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h3><ul>
<li>首先绑定value，值为你所绑定的元素</li>
<li>当input值发生了变动触发input事件，从而去改变这个绑定值：借助event.target.value（实时输入框的值）</li>
<li>通过响应式原理，监听inputvalue,变动后，触发视图更新</li>
</ul>
<h2 id="复盘响应式原理"><a href="#复盘响应式原理" class="headerlink" title="复盘响应式原理"></a>复盘响应式原理</h2><h3 id="对象属性"><a href="#对象属性" class="headerlink" title="对象属性"></a>对象属性</h3><ul>
<li><p>数据属性</p>
</li>
<li><p>存取器属性</p>
<ul>
<li>取值getter</li>
<li>设置值setter</li>
</ul>
</li>
</ul>
<h3 id="object-defineProperty"><a href="#object-defineProperty" class="headerlink" title="object.defineProperty"></a>object.defineProperty</h3><h3 id="observe"><a href="#observe" class="headerlink" title="observe"></a>observe</h3><ul>
<li><p>为每一个对象绑定getter 和setter</p>
</li>
<li><p>向dep订阅者通知变化</p>
<ul>
<li><p>每当同一个属性用到了多个指令</p>
<ul>
<li>v-model=name</li>
<li></li>
</ul>
</li>
<li><p>那就单独向dep中增加一个订阅者</p>
<ul>
<li><p>那这个订阅者哪里来的</p>
<ul>
<li>Subtopic</li>
</ul>
</li>
</ul>
</li>
<li><p>当属性的setter触发要去更新值，那就调用notify循环更新队列里的订阅者</p>
</li>
</ul>
</li>
</ul>
<h3 id="compile"><a href="#compile" class="headerlink" title="compile"></a>compile</h3><ul>
<li><p>初始化时将模板指令里的变量替换为数据</p>
</li>
<li><p>监听数据的改动，通过watcher为其绑定更新函数</p>
<ul>
<li>绑定后就生成了一个订阅者并向dep中去添加它</li>
</ul>
</li>
<li><p>最后dep再次通知watcher</p>
<ul>
<li>watcher调用其自身的update方法并触发coml;ier里的回调去更新视图</li>
</ul>
</li>
</ul>
<h3 id="watcher"><a href="#watcher" class="headerlink" title="watcher"></a>watcher</h3><ul>
<li>Subtopic</li>
</ul>
<h2 id="vue-nexttick"><a href="#vue-nexttick" class="headerlink" title="vue.nexttick"></a>vue.nexttick</h2><h3 id="怎么用"><a href="#怎么用" class="headerlink" title="怎么用"></a>怎么用</h3><ul>
<li><p>当需要获取到最新dom结构</p>
<ul>
<li>因为vue是异步跟新，当dom结构发生了变化，dom节点不一定更新</li>
</ul>
</li>
</ul>
<h3 id="叙述逻辑"><a href="#叙述逻辑" class="headerlink" title="叙述逻辑"></a>叙述逻辑</h3><ul>
<li><p>首先我说一下事件循环机制里的 渲染时机是微任务执行完毕后去渲染的</p>
</li>
<li><p>那如果要在异步任务中去更新dom，应该将其包装为微任务，如果包装为宏任务，会导致多渲染一次</p>
</li>
<li><p>在vue中是以异步更新机制，避免重复渲染，如果采取同步渲染会导致，操作一次dom，就去更新一次</p>
</li>
<li><p>子主题</p>
</li>
<li><p>那在vue中去更新一个状态，要将其包装为一个异步操作，派发出去执行，依赖vue.nexttick 去执行</p>
</li>
<li><p>源码怎么做的</p>
<ul>
<li><p>之后检查pending锁是为了避免之前的异步任务未执行完毕，再次派发任务导致混乱</p>
<ul>
<li>首先会将内部的回调推入到callbacks数组里面</li>
<li>用timefunc方法，将其包装</li>
<li>将操作优先包装为promise任务</li>
<li>在考虑 mutation observe</li>
<li>再去考虑 settimmedia</li>
<li>最后考虑包装为settimout任务</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="vuex"><a href="#vuex" class="headerlink" title="vuex"></a>vuex</h2><h3 id="是什么"><a href="#是什么" class="headerlink" title="是什么"></a>是什么</h3><ul>
<li>集中管理全局状态的库，state数据是响应式的，一旦数据发生改变，用到这个数据的组件状态都会发生改变，全局组件中比较常用，因为可能在任意组件中去引用它，这样能够更加方便的去管理其状态</li>
</ul>
<h3 id="核心概念"><a href="#核心概念" class="headerlink" title="核心概念"></a>核心概念</h3><ul>
<li><p>state</p>
<ul>
<li>state数据存储的是响应式的，先通过引入usestore再通过computed 返回state数据，类似ref对象</li>
</ul>
</li>
<li><p>actions</p>
</li>
<li><p>mutations</p>
</li>
<li><p>module</p>
</li>
<li><p>getter</p>
</li>
</ul>
<h2 id="vue3为什么快"><a href="#vue3为什么快" class="headerlink" title="vue3为什么快"></a>vue3为什么快</h2><h3 id="proxy"><a href="#proxy" class="headerlink" title="proxy"></a>proxy</h3><h3 id="patchflag"><a href="#patchflag" class="headerlink" title="patchflag"></a>patchflag</h3><h3 id="hoiststatic"><a href="#hoiststatic" class="headerlink" title="hoiststatic"></a>hoiststatic</h3><h2 id="路由原理"><a href="#路由原理" class="headerlink" title="路由原理"></a>路由原理</h2><h3 id="为什么要有路由"><a href="#为什么要有路由" class="headerlink" title="为什么要有路由"></a>为什么要有路由</h3><ul>
<li><p>为了解决spa</p>
<ul>
<li><p>实现不刷新页面的基础上，进行数据刷新</p>
</li>
<li><p>弊端在于，无法进行定位</p>
<ul>
<li><p>hash</p>
<ul>
<li>通过windo.location.hash修改url</li>
<li>通过hashchange事件进行监听</li>
</ul>
</li>
<li><p>history</p>
<ul>
<li>history.pushstate，修改浏览器的历史</li>
<li>history.replacestate</li>
<li>最后通过popstate 进行监听</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<p><em>XMind - Evaluation Version</em></p>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/01/19/V8%E5%BC%95%E6%93%8E/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="John Doe">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/01/19/V8%E5%BC%95%E6%93%8E/" class="post-title-link" itemprop="url">v8引擎基础梳理</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2021-01-19 12:20:05" itemprop="dateCreated datePublished" datetime="2021-01-19T12:20:05+08:00">2021-01-19</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">In</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/v8%E5%BC%95%E6%93%8E/" itemprop="url" rel="index"><span itemprop="name">v8引擎</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="V8引擎"><a href="#V8引擎" class="headerlink" title="V8引擎"></a>V8引擎</h1><h2 id="如何来执行一段js代码"><a href="#如何来执行一段js代码" class="headerlink" title="如何来执行一段js代码"></a>如何来执行一段js代码</h2><h3 id="首先你想想，v8想要来执行一段代码，首先你得有一个初始环境吧，基础环境"><a href="#首先你想想，v8想要来执行一段代码，首先你得有一个初始环境吧，基础环境" class="headerlink" title="首先你想想，v8想要来执行一段代码，首先你得有一个初始环境吧，基础环境"></a>首先你想想，v8想要来执行一段代码，首先你得有一个初始环境吧，基础环境</h3><ul>
<li><p>全局执行上下文</p>
<ul>
<li><p>创建阶段</p>
<ul>
<li>首先会创建一个全局对象window： global object</li>
<li>创建一个this 然后让它指向这个window</li>
<li>之后为变量和函数分配空间/并且要为变量赋一个undefined</li>
<li>创建作用域链</li>
</ul>
</li>
</ul>
</li>
<li><p>全局作用域</p>
<ul>
<li>里面有全局变量，全局函数</li>
</ul>
</li>
<li><p>想来存储对象，不得需要创建存储的空间吗/堆 —栈</p>
</li>
<li><p>事件循环系统</p>
</li>
<li><p>web api </p>
</li>
</ul>
<h3 id="有了基础环境就可以来执行代码了"><a href="#有了基础环境就可以来执行代码了" class="headerlink" title="有了基础环境就可以来执行代码了"></a>有了基础环境就可以来执行代码了</h3><ul>
<li><p>为了能够让v8引擎识别代码，需要将其结构化</p>
<ul>
<li><p>过程</p>
<ul>
<li><p>词法分析</p>
<ul>
<li>将源代码拆解为不可再分的最小单位token</li>
</ul>
</li>
<li><p>语法分析</p>
<ul>
<li><p>将词(token)依据语法规则转换为AST</p>
<ul>
<li><p>AST</p>
<ul>
<li><p>转为/字节码中间代码</p>
<ul>
<li><p>为什么要转化为字节码：</p>
<ul>
<li>首先字节码可以被解释器执行</li>
<li>字节码可以被编译器反优化为机器码</li>
<li>更重要的是：字节码跨平台。而机器码不同平台要做不同适配：效率低</li>
</ul>
</li>
<li><p>交给解释器来执行</p>
</li>
</ul>
</li>
<li><p>惰性解析</p>
<ul>
<li>v8引擎处于对内存占用，用户体验的角度，其实并不是将所有的代码，都转为中间代码/或是机器码</li>
<li>具体就是遇到函数声明不会为函数内部的代码转为字节码/AST</li>
<li>依赖闭包来实现</li>
<li>那么我什么时候去生成这个之前忽略的代码，当我调用之前所声明函数的时候：调用的时候才会去生成之前所忽略的代码对应的ast树</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p>生成AST树的同时也生成了作用域</p>
</li>
</ul>
</li>
<li><p>监控器–如果监控发现解释器在重复执行某段代码</p>
<ul>
<li><p>会将其转为热点代码</p>
<ul>
<li><p>交给编译器编译为二进制机器码–在进行优化</p>
<ul>
<li>下次再执行解释器优先解释执行优化过后的二进制机器码代码</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="闭包"><a href="#闭包" class="headerlink" title="闭包"></a>闭包</h2><h3 id="V8执行代码过程"><a href="#V8执行代码过程" class="headerlink" title="V8执行代码过程"></a>V8执行代码过程</h3><ul>
<li><p>编译</p>
<ul>
<li><p>将代码转为中间代码</p>
</li>
<li><p>AST树</p>
</li>
<li><p>特点</p>
<ul>
<li><p>惰性解析</p>
<ul>
<li>v8引擎处于对内存占用，用户体验的角度，其实并不是将所有的代码，都转为中间代码/或是机器码</li>
<li>具体就是遇到函数声明不会为函数内部的代码转为字节码/AST</li>
<li>依赖闭包来实现</li>
<li>只有调用的时候才会去转换为中间代码，如果内部代码太多又不去执行，那再去转换为中间代码，这样就浪费资源</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p>执行阶段</p>
</li>
</ul>
<h3 id="三大特性"><a href="#三大特性" class="headerlink" title="三大特性"></a>三大特性</h3><ul>
<li><p>允许函数嵌套函数</p>
</li>
<li><p>允许内部函数访问外部函数的变量（依赖作用域链）</p>
<ul>
<li><p>正是由于这个特性，在惰性解析阶段 ,由于并不清楚内部函数是否引用了外部函数的变量，从而导致这个变量无法被回收</p>
<ul>
<li><p>为了解决这个问题，预解析器</p>
<ul>
<li><p>检查函数的内部是否有错</p>
</li>
<li><p>判断函数内部是否存在引用了自由变量</p>
<ul>
<li>会将这个变量复制到堆中，这样，即便父函数执行完毕后，变量被销毁，子函数依然可以在堆中找到我所引用的变量</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p>函数可以作为返回值（函数是一等公民）所以可以实现类似基本数据类型的事情</p>
</li>
</ul>
<h2 id="编译流水线·"><a href="#编译流水线·" class="headerlink" title="编译流水线·"></a>编译流水线·</h2><h3 id="宿主环境"><a href="#宿主环境" class="headerlink" title="宿主环境"></a>宿主环境</h3><ul>
<li><p>浏览器为v8执行javascript提供了必要条件</p>
</li>
<li><p>node.js也是v8的宿主环境</p>
</li>
<li><p>存储空间</p>
<ul>
<li><p>栈空间</p>
<ul>
<li><p>存储函数的/这个是不是所谓的函数调用栈</p>
<ul>
<li>也就是说每调用一次函数 就将其推入栈中，由于栈的空间是连续的，并且是有限的，所以随着不断的递归调用，栈会溢出</li>
</ul>
</li>
<li><p>v8引擎首先会将全局执行上下文推入栈中，之后调用函数会再次将函数执行上下文推入栈中</p>
</li>
</ul>
</li>
<li><p>堆空间</p>
<ul>
<li>基础数据类型</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="那现在有了存储空间的创建，还有全局执行上下文，和函数上下文还缺点什么，还缺宿主环境提供的主线程"><a href="#那现在有了存储空间的创建，还有全局执行上下文，和函数上下文还缺点什么，还缺宿主环境提供的主线程" class="headerlink" title="那现在有了存储空间的创建，还有全局执行上下文，和函数上下文还缺点什么，还缺宿主环境提供的主线程"></a>那现在有了存储空间的创建，还有全局执行上下文，和函数上下文还缺点什么，还缺宿主环境提供的主线程</h3><ul>
<li>原因在于v8执行代码其实是依赖于宿主环境提供的主线程</li>
<li>主线程会循环的调用，消息队列里的任务</li>
</ul>
<h2 id="垃圾回收机制"><a href="#垃圾回收机制" class="headerlink" title="垃圾回收机制"></a>垃圾回收机制</h2><h3 id="当v8引擎判断某个变量不再需要的时候会进行处理"><a href="#当v8引擎判断某个变量不再需要的时候会进行处理" class="headerlink" title="当v8引擎判断某个变量不再需要的时候会进行处理"></a>当v8引擎判断某个变量不再需要的时候会进行处理</h3><h3 id="分类"><a href="#分类" class="headerlink" title="分类"></a>分类</h3><ul>
<li><p>为什么要分类</p>
<ul>
<li><p>为了针对不同对象的生存周期，来灵活处理</p>
</li>
<li><p>堆？为什么不是栈</p>
<ul>
<li><p>新生代</p>
<ul>
<li>内存空间很快会被回收</li>
</ul>
</li>
<li><p>老生代</p>
<ul>
<li>能到老说明什么，生存周期久</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p>主垃圾回收器</p>
<ul>
<li><p>算法</p>
<ul>
<li>标记–清除算法</li>
<li>标记–整理</li>
</ul>
</li>
<li><p>步骤</p>
<ul>
<li><p>V8引擎会来判断对象是否可抵达</p>
<ul>
<li><p>可抵达</p>
<ul>
<li>可以被清除</li>
</ul>
</li>
<li><p>不可抵达</p>
<ul>
<li>不可以被清除</li>
</ul>
</li>
</ul>
</li>
<li><p>但在清除之前，将活动对象，全部移动到一端</p>
<ul>
<li><p>这一步的意义是什么</p>
<ul>
<li>因为随着你频繁删除堆里所存储的对象，必然会导致内存空间不连续</li>
<li>这个久是让内存空间尽可能的连续</li>
</ul>
</li>
</ul>
</li>
<li><p>最后才去清除所有可抵达的对象</p>
</li>
</ul>
</li>
</ul>
</li>
<li><p>副垃圾回收器</p>
<ul>
<li><p>堆里</p>
<ul>
<li><p>新生代</p>
<ul>
<li>存储空间</li>
<li>空闲区域</li>
</ul>
</li>
<li><p>老生代</p>
</li>
</ul>
</li>
<li><p>步骤</p>
<ul>
<li>当新生代的对象里的存储空间，存储数据，并且要被删除之前会复制存活的活动对象，给空闲区，并存到连续的空间内，之后存储空间和空闲区域，进行调换</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="如何解决异步回调的问题"><a href="#如何解决异步回调的问题" class="headerlink" title="如何解决异步回调的问题"></a>如何解决异步回调的问题</h2><h3 id="promise"><a href="#promise" class="headerlink" title="promise"></a>promise</h3><h3 id="fetch"><a href="#fetch" class="headerlink" title="fetch"></a>fetch</h3><h3 id="generater"><a href="#generater" class="headerlink" title="generater"></a>generater</h3><ul>
<li><p>为什么有了promise 还要有generater</p>
<ul>
<li>主要是因为处理逻辑过于复杂的话，会充斥着大量的then()方法，依然不便理解</li>
</ul>
</li>
<li><p>想来利用同步的方式来书写异步的代码</p>
<ul>
<li><p>函数暂停执行</p>
<ul>
<li>遇到异步执行任务，暂停整个函数的执行</li>
</ul>
</li>
<li><p>函数恢复执行</p>
<ul>
<li>当得到了某个异步任务请求的数据，后再恢复函数的执行</li>
</ul>
</li>
</ul>
</li>
<li><p>弊端就是依然需要，co函数，繁琐</p>
</li>
</ul>
<h3 id="async-await"><a href="#async-await" class="headerlink" title="async/await"></a>async/await</h3><ul>
<li><p>用同步的形式，书写异步的代码</p>
</li>
<li><p>底层逻辑：微任务和协程应用</p>
</li>
<li><p>async</p>
<ul>
<li><p>异步执行并隐式返回promsie</p>
<ul>
<li><p>先来通俗的理解，当用了async后，遇到await 会等await后的函数，也就是说async 函数，会暂停执行，在合适的时机来返回</p>
</li>
<li><p>那么问题来了–何时恢复其执行</p>
<ul>
<li><p>await等待的类型</p>
<ul>
<li><p>普通表达式</p>
<ul>
<li>V8引擎会自动将其包装为已经成功的promise对象</li>
</ul>
</li>
<li><p>promise</p>
<ul>
<li>会暂停async 声明的函数，然后等待promsie对象的状态转变为fullfiled/rejected才会恢复函数执行</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="UI线程"><a href="#UI线程" class="headerlink" title="UI线程"></a>UI线程</h2><h3 id="消息队列"><a href="#消息队列" class="headerlink" title="消息队列"></a>消息队列</h3><ul>
<li>当通过鼠标，键盘等所触发的事件，会推入到ui线程里</li>
</ul>
<h3 id="由主线程来不断取出，再执行"><a href="#由主线程来不断取出，再执行" class="headerlink" title="由主线程来不断取出，再执行"></a>由主线程来不断取出，再执行</h3><h3 id="那怎么来理解settimeout里回调函数的执行"><a href="#那怎么来理解settimeout里回调函数的执行" class="headerlink" title="那怎么来理解settimeout里回调函数的执行"></a>那怎么来理解settimeout里回调函数的执行</h3><ul>
<li>就是ui线程遇到settimeout会将里面的回调，包装为事件，推入宏任务队列里面</li>
</ul>
<h3 id="宏-微任务队列"><a href="#宏-微任务队列" class="headerlink" title="宏/微任务队列"></a>宏/微任务队列</h3><ul>
<li><p>宏任务</p>
</li>
<li><p>微任务</p>
<ul>
<li><p>主线程</p>
</li>
<li><p>调用栈</p>
<ul>
<li><p>先推入全局执行上下文</p>
</li>
<li><p>每调用一个函数就将其推入栈中</p>
</li>
<li><p>每执行完一个函数之后，就将其出栈</p>
<ul>
<li>这里如果遇到没有终止条件的递归函数，由于调用栈空间有限里面会存在过多的函数执行上下文导致栈溢出</li>
</ul>
</li>
</ul>
</li>
<li><p>消息队列</p>
</li>
<li><p>来理解一下为什么会有微任务，它的出现解决了什么问题</p>
<ul>
<li>主要解决了宏任务执行时机不可控的问题</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="回调函数"><a href="#回调函数" class="headerlink" title="回调函数"></a>回调函数</h2><h3 id="同步回调"><a href="#同步回调" class="headerlink" title="同步回调"></a>同步回调</h3><ul>
<li>就是在以（回调函数为参数的函数）执行函数内部，去执行回调函数的</li>
</ul>
<h3 id="异步回调"><a href="#异步回调" class="headerlink" title="异步回调"></a>异步回调</h3><ul>
<li>就是在在其它位置/其它时间点来调用回调函数，settimeout 是将其内部的回调函数，封装为一个宏任务，由主线程某一时刻，来取出并执行的</li>
</ul>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/01/19/%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="John Doe">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/01/19/%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" class="post-title-link" itemprop="url">垃圾回收机制</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2021-01-19 11:20:05" itemprop="dateCreated datePublished" datetime="2021-01-19T11:20:05+08:00">2021-01-19</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">In</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/" itemprop="url" rel="index"><span itemprop="name">执行上下文</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="执行上下文"><a href="#执行上下文" class="headerlink" title="执行上下文"></a>执行上下文</h1><h2 id="所谓的执行上下文其实就是代码所处的环境"><a href="#所谓的执行上下文其实就是代码所处的环境" class="headerlink" title="所谓的执行上下文其实就是代码所处的环境"></a>所谓的执行上下文其实就是代码所处的环境</h2><h2 id="分类"><a href="#分类" class="headerlink" title="分类"></a>分类</h2><h3 id="全局执行上下文"><a href="#全局执行上下文" class="headerlink" title="全局执行上下文"></a>全局执行上下文</h3><h3 id="函数执行上下文"><a href="#函数执行上下文" class="headerlink" title="函数执行上下文"></a>函数执行上下文</h3><h3 id="eval执行上下文–我不用"><a href="#eval执行上下文–我不用" class="headerlink" title="eval执行上下文–我不用"></a>eval执行上下文–我不用</h3><h2 id="调用栈"><a href="#调用栈" class="headerlink" title="调用栈"></a>调用栈</h2><h3 id="每当执行上下文创建一个就将起推入调用栈中，然后当函数执行完后，对应的函数执行上下文才会出栈，从而让出资源空间"><a href="#每当执行上下文创建一个就将起推入调用栈中，然后当函数执行完后，对应的函数执行上下文才会出栈，从而让出资源空间" class="headerlink" title="每当执行上下文创建一个就将起推入调用栈中，然后当函数执行完后，对应的函数执行上下文才会出栈，从而让出资源空间"></a>每当执行上下文创建一个就将起推入调用栈中，然后当函数执行完后，对应的函数执行上下文才会出栈，从而让出资源空间</h3><ul>
<li><p>从这里开始，就可以知道作用域的本质了，其实就是当前所处的执行上下文了</p>
<ul>
<li><p>那为什么作用域外部无法访问到另一个作用域的内部</p>
<ul>
<li><p>原理其实是因为当外部执行上下文想要去访问函数执行上下文里的变量的时候，它出栈了自然是无法访问了</p>
</li>
<li><p>那为什么内部作用域又能去访问外部作用域</p>
<ul>
<li>其实这是因为zhi’x</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="全局执行上下文执行过程"><a href="#全局执行上下文执行过程" class="headerlink" title="全局执行上下文执行过程"></a>全局执行上下文执行过程</h3><ul>
<li><p>创建阶段</p>
<ul>
<li>首先会创建一个全局对象window： global object</li>
<li>创建一个this 然后让它指向这个window</li>
<li>之后为变量和函数分配空间/并且要为变量赋一个undefined</li>
<li>创建作用域链</li>
</ul>
</li>
<li><p>执行阶段</p>
<ul>
<li>js引擎开始一行行执行代码，并开始给变量赋值</li>
</ul>
</li>
<li><p>由此引出了变量提升的本质</p>
<ul>
<li>其实是因为js的执行上下文的创建阶段和赋值阶段并不同步所造成的</li>
<li>创建阶段给变量开辟空间然后赋了初值undefined</li>
<li>之后赋值的时候由于在访问的变量的时候，要去赋值的代码还未执行，所以依然是undefined</li>
</ul>
</li>
</ul>
<h3 id="函数执行上下文（调用时才会推入调用栈中）"><a href="#函数执行上下文（调用时才会推入调用栈中）" class="headerlink" title="函数执行上下文（调用时才会推入调用栈中）"></a>函数执行上下文（调用时才会推入调用栈中）</h3><ul>
<li><p>创建阶段</p>
<ul>
<li><p>首先明确一点这个是在函数调用的时候才生成的</p>
</li>
<li><p>创建this </p>
<ul>
<li><p>将其指向调用者</p>
</li>
<li><p>无人调用就指向window</p>
<ul>
<li>也就是说，普通函数之所以this指向window其实是这里指定的</li>
</ul>
</li>
</ul>
</li>
<li><p>创建arguements 这里面包含着函数所有的参数</p>
</li>
<li><p>创建作用域链</p>
</li>
<li><p>是这样你想一想，你在全局执行上下文已经有了全局对象了，那函数执行上下文自然不用再去建立了</p>
</li>
</ul>
</li>
<li><p>执行阶段</p>
<ul>
<li>一行行执行函数内部的代码</li>
</ul>
</li>
</ul>
<h2 id="那为什么一定要有他，存在的意义是什么，其实从网络体系分层的思想可以看出来，目的就是在解耦，降低代码执行的复杂度"><a href="#那为什么一定要有他，存在的意义是什么，其实从网络体系分层的思想可以看出来，目的就是在解耦，降低代码执行的复杂度" class="headerlink" title="那为什么一定要有他，存在的意义是什么，其实从网络体系分层的思想可以看出来，目的就是在解耦，降低代码执行的复杂度"></a>那为什么一定要有他，存在的意义是什么，其实从网络体系分层的思想可以看出来，目的就是在解耦，降低代码执行的复杂度</h2>
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/01/12/%E5%BC%82%E6%AD%A5/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="John Doe">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/01/12/%E5%BC%82%E6%AD%A5/" class="post-title-link" itemprop="url">垃圾回收机制</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2021-01-12 14:20:05" itemprop="dateCreated datePublished" datetime="2021-01-12T14:20:05+08:00">2021-01-12</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">In</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%BC%82%E6%AD%A5/" itemprop="url" rel="index"><span itemprop="name">异步</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="异步"><a href="#异步" class="headerlink" title="异步"></a>异步</h1><h2 id="异步发展阶段"><a href="#异步发展阶段" class="headerlink" title="异步发展阶段"></a>异步发展阶段</h2><h3 id="回调函数"><a href="#回调函数" class="headerlink" title="回调函数"></a>回调函数</h3><h3 id="generator"><a href="#generator" class="headerlink" title="generator()"></a>generator()</h3><h3 id="promise"><a href="#promise" class="headerlink" title="promise"></a>promise</h3><ul>
<li><p>为什么有promise</p>
<ul>
<li><p>避免出现回调地狱</p>
</li>
<li><p>它是如何避免的</p>
<ul>
<li>通过.then的链式调用，从而避免的了不断嵌套的回调地狱</li>
</ul>
</li>
</ul>
</li>
<li><p>它有哪些状态</p>
<ul>
<li><p>pending</p>
<ul>
<li>new/创建 一个promise后的状态</li>
</ul>
</li>
<li><p>fulfilled</p>
<ul>
<li>调用promise.resolve()的方法后</li>
</ul>
</li>
<li><p>rejected</p>
<ul>
<li>异步任务出错/或是抛出异常后//但是如果仅仅是return 了一个错误对象，也是不行的</li>
<li>调用promise.reject()</li>
</ul>
</li>
</ul>
</li>
<li><p>不同状态所触发的方法</p>
<ul>
<li><p>then()</p>
<ul>
<li><p>首先当promise对象为fullfiled时会触发</p>
</li>
<li><p>里面只能接收一个函数，其它类型一律无视</p>
</li>
<li><p>并且会返回一个新的fullfiled(一般情况下，如果throw了一个错误)promise对象</p>
<ul>
<li>这也解答了自己一个疑惑就是说，为什么then可以链式来调用，不是状态只能变一次吗，其实是因为又新建了一个新的promise对象</li>
</ul>
</li>
</ul>
</li>
<li><p>catch()</p>
<ul>
<li>当状态为rejected时触发</li>
<li>返回了一个具有fullfiled状态的promise对象</li>
</ul>
</li>
<li><p>finally</p>
<ul>
<li>无论什么状态，最终都会执行的函数</li>
</ul>
</li>
</ul>
</li>
<li><p>谨记一点就是</p>
<ul>
<li><p>promise的状态的改变是不可逆的</p>
<ul>
<li><p>一旦成为fullfilled状态，或是rejected状态</p>
</li>
<li><p>即便是同状态的改变也不可以</p>
</li>
<li><p>核心</p>
<ul>
<li>状态仅能改变一次</li>
<li>再具体一点就是说，一旦状态变了，后续,resolve(),reject()方法全部失效</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p>有哪些方法</p>
<ul>
<li><p>resolve(value)</p>
<ul>
<li><p>成功</p>
<ul>
<li>Subtopic</li>
</ul>
</li>
<li><p>value是一个带有then()方法的对象</p>
<ul>
<li><p>由then()方法所返回状态来决定</p>
<ul>
<li>从这可以看出来，then()方法返回的并不一定是成功的状态</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p>reject( )</p>
<ul>
<li>promise.reject()所返回的是失败状态的promise对象</li>
</ul>
</li>
<li><p>race（）</p>
</li>
<li><p>all()</p>
</li>
</ul>
</li>
</ul>
<h3 id="async-await"><a href="#async-await" class="headerlink" title="async/await"></a>async/await</h3><ul>
<li><p>原因</p>
<ul>
<li>已经有了promise为什么还要有它</li>
</ul>
</li>
<li><p>这里先记住一点就是，await 一旦出现意味着之后所有的任务全部都是，异步任务，async所声明的函数本身依然属于同步任务</p>
</li>
<li><p>记住await</p>
<ul>
<li>普通值</li>
<li>函数</li>
</ul>
</li>
</ul>
<h2 id="它的特点是什么"><a href="#它的特点是什么" class="headerlink" title="它的特点是什么"></a>它的特点是什么</h2><h3 id="就是异步任务的执行是不会阻塞，之后代码的执行，可以等之后的任务执行后再去执行；"><a href="#就是异步任务的执行是不会阻塞，之后代码的执行，可以等之后的任务执行后再去执行；" class="headerlink" title="就是异步任务的执行是不会阻塞，之后代码的执行，可以等之后的任务执行后再去执行；"></a>就是异步任务的执行是不会阻塞，之后代码的执行，可以等之后的任务执行后再去执行；</h3><h3 id="一言以蔽之"><a href="#一言以蔽之" class="headerlink" title="一言以蔽之"></a>一言以蔽之</h3><ul>
<li>不会去立刻执行的任务</li>
<li>新理解：函数执行后不会立刻返回结果，并且不阻塞之后的任务</li>
</ul>
<h2 id="那么为什么要有异步"><a href="#那么为什么要有异步" class="headerlink" title="那么为什么要有异步"></a>那么为什么要有异步</h2><h3 id="有些网络请求实在是太耗费时间了，如果不引入异步机制的话会浪费时间，用同步的话，只要第一个任务没完成后面的任务全部阻塞了"><a href="#有些网络请求实在是太耗费时间了，如果不引入异步机制的话会浪费时间，用同步的话，只要第一个任务没完成后面的任务全部阻塞了" class="headerlink" title="有些网络请求实在是太耗费时间了，如果不引入异步机制的话会浪费时间，用同步的话，只要第一个任务没完成后面的任务全部阻塞了"></a>有些网络请求实在是太耗费时间了，如果不引入异步机制的话会浪费时间，用同步的话，只要第一个任务没完成后面的任务全部阻塞了</h3><h2 id="哪些属于异步任务"><a href="#哪些属于异步任务" class="headerlink" title="哪些属于异步任务"></a>哪些属于异步任务</h2><h3 id="settimeout"><a href="#settimeout" class="headerlink" title="settimeout()"></a>settimeout()</h3><h3 id="dom事件"><a href="#dom事件" class="headerlink" title="dom事件"></a>dom事件</h3><ul>
<li>子主题</li>
</ul>
<h3 id="AJAX-AXIOS请求"><a href="#AJAX-AXIOS请求" class="headerlink" title="AJAX/AXIOS请求"></a>AJAX/AXIOS请求</h3><h3 id="setinterval"><a href="#setinterval" class="headerlink" title="setinterval()"></a>setinterval()</h3><h3 id="回调函数-1"><a href="#回调函数-1" class="headerlink" title="回调函数"></a>回调函数</h3><ul>
<li><p>先明确一下什么是回调函数</p>
<ul>
<li><p>就是当一个a函数作为函数b的参数，并且由这个b函数来执行这个a函数//那么a就是回调函数</p>
</li>
<li><p>那它和异步有什么关系</p>
<ul>
<li>回调函数能够获得异步任务的结果</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="那怎么解决异步回调的问题"><a href="#那怎么解决异步回调的问题" class="headerlink" title="那怎么解决异步回调的问题"></a>那怎么解决异步回调的问题</h2><h3 id="回调地狱"><a href="#回调地狱" class="headerlink" title="回调地狱"></a>回调地狱</h3><ul>
<li>当前执行的任务依赖上一个任务的执行的结果，并在上一个任务的回调中去执行</li>
</ul>
<h2 id="主题"><a href="#主题" class="headerlink" title="主题"></a>主题</h2><h2 id="主题-1"><a href="#主题-1" class="headerlink" title="主题"></a>主题</h2>
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2020/12/29/HTTP%E4%BD%93%E7%B3%BB/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="John Doe">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/12/29/HTTP%E4%BD%93%E7%B3%BB/" class="post-title-link" itemprop="url">HTTP</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2020-12-29 12:20:05" itemprop="dateCreated datePublished" datetime="2020-12-29T12:20:05+08:00">2020-12-29</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">In</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/HTTP/" itemprop="url" rel="index"><span itemprop="name">HTTP</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h2 id="👱-GET-和-post-本质区别"><a href="#👱-GET-和-post-本质区别" class="headerlink" title="👱 GET 和 post 本质区别"></a>👱 GET 和 post 本质区别</h2><h3 id="HTTP-常见的请求头字段"><a href="#HTTP-常见的请求头字段" class="headerlink" title="HTTP 常见的请求头字段"></a>HTTP 常见的请求头字段</h3><h3 id="叙述思路"><a href="#叙述思路" class="headerlink" title="叙述思路"></a>叙述思路</h3><ol>
<li>首先属于 HTTP 协议—–》 引出本质是 TCP 连接——》 引出 tcp 连接次数问题—–&gt; 由次数问题：想到幂等。</li>
<li>其次想到安全幂等，GET 安全幂等，POST 不安全也不幂等。</li>
<li>同时还有一点 get 请求能够<strong>缓存</strong>比如第一次请求时浏览器会把相应数据缓存到本地，方便之后能直接命中：强缓存逻辑，而 post 请求时无法被缓存的。</li>
<li>其次想到想起它们属于 HTTP 协议，也就是说也是基于 TCP 链接的，所以它们的<strong>本质</strong>都是 <strong>TCP 连接。</strong></li>
<li>GET 请求是<strong>一个 tcp 报文</strong>  :(对于 GET 方式的请求，浏览器会把 http <strong>header</strong> 和 data 一并发送出去，服务器响应 200（返回数据）。) //你请求肯定要有请求头吗，对吧</li>
<li>而 POST 请求是<strong>两个 tcp 报文</strong>，(浏览器先发送 header，服务器响应 100，浏览器再发送 data，服务器响应 200 ok（返回数据）。)</li>
<li>所谓<strong>安全</strong>就是不会改变服务器资源，所谓的<strong><strong>幂</strong></strong>想起次幂，也就是说<strong>多次</strong>的意思</li>
<li>所谓的<strong>不安全</strong>其实就是会改变，服务器的资源，所谓的不幂等就是，多次操作结果不相同。</li>
</ol>
<h4 id="💯-100-continue"><a href="#💯-100-continue" class="headerlink" title="💯 100 continue"></a>💯 100 continue</h4><ol>
<li>HTTP <strong><code>100 Continue</code></strong> 信息型状态响应码表示目前为止一切正常, 客户端应该继续请求, 如果已完成请求则忽略.// 自己的话就是:👌  因为是 <strong>100</strong> 分所以<strong>目前状态正常，可以继续请求。</strong></li>
</ol>
<h3 id="为什么-http1-不能实现多路复用"><a href="#为什么-http1-不能实现多路复用" class="headerlink" title="为什么 http1 不能实现多路复用"></a>为什么 http1 不能实现多路复用</h3><ol>
<li>HTTP/1.1 不是二进制传输，而是通过文本进行传输。由于没有流的概念，在使用并行传输（多路复用）传递数据时，接收端在接收到响应后，并不能区分多个响应分别对应的请求，所以无法将多个响应的结果重新进行组装，也就实现不了多路复用。</li>
</ol>
<h3 id="响应码"><a href="#响应码" class="headerlink" title="响应码"></a>响应码</h3><ol>
<li>301 : 就是永久重定向，就是从 seo 优化的角度更好，会<strong>转移权重</strong>。（联想一个旧网址的 seo 和新网址的 seo）.</li>
<li>但是 302 就是临时的重定向，<strong>不会转移权重</strong>不会去更新这个，等于是搜索权重下降了，因为 seo 不允许多个，域名指向一个地址，作弊提升这个权重排名。</li>
<li>叙述思路：就是，301–》seo ，转移权重（就是将旧地址的搜索权重转移到新的）。. 重定向之后会做什么？读取浏览器缓存，强缓存和协商缓存</li>
<li>302–》临时的重定向，不会把旧网址的，权重进行转移。但是会改变请求的方法把 post 改为了 get 请求，所以出现了 307 的临时重定向，不会去改变这个请求的方法。</li>
</ol>
<h3 id="http-持久连接"><a href="#http-持久连接" class="headerlink" title="http 持久连接"></a>http 持久连接</h3><ol>
<li>首先第一点，何时断开服务器会去设定一个时间然后，在 keep-alive 中添加这个断开的时间。</li>
<li>其次何时数据传输完毕，数据联想为一个 length,是不是只有长度符合你的 length 才能够判断，数据传输完毕，追问—》如果说没有 content-length;怎么来判断，就是说看编码快，如果出现了0块那就为结束</li>
</ol>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2020/12/23/TCP%E6%8B%A5%E5%A1%9E%E6%B5%81%E9%87%8F%E6%8E%A7%E5%88%B6%E7%9B%B8%E5%85%B3/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="John Doe">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/12/23/TCP%E6%8B%A5%E5%A1%9E%E6%B5%81%E9%87%8F%E6%8E%A7%E5%88%B6%E7%9B%B8%E5%85%B3/" class="post-title-link" itemprop="url">tcp重传机制拥塞控制相关</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2020-12-23 22:12:00" itemprop="dateCreated datePublished" datetime="2020-12-23T22:12:00+08:00">2020-12-23</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">In</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/TCP/" itemprop="url" rel="index"><span itemprop="name">TCP</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="TCP"><a href="#TCP" class="headerlink" title="TCP"></a>TCP</h1><h2 id="这一次首先复习一下TCP重传机制"><a href="#这一次首先复习一下TCP重传机制" class="headerlink" title="这一次首先复习一下TCP重传机制"></a>这一次首先复习一下TCP重传机制</h2><h3 id="为什么TCP会重传呢"><a href="#为什么TCP会重传呢" class="headerlink" title="为什么TCP会重传呢"></a>为什么TCP会重传呢</h3><ul>
<li><p>TCP建立连接的过程如果这个过程如果有丢包那么就会触发重传机制</p>
<ul>
<li><p>超时重传</p>
<ul>
<li>就是TCP内部有一个机制会设定一个时间（时延）这个时间大概略大于，tcp报文往返时间，这个时间的设置不能太短，如果太短那报文还没来的及发回来就误认为包丢了，导致重传，但是也不能设置的太长，这个会造成网络资源浪费（为什么会造成资源浪费我来解释一下：就是说如果时间设置太长了，此时真的发生丢包了，那客户端等很久之后才重发，那不是很浪费网路资源嘛对吧；</li>
</ul>
</li>
<li><p>快速重传</p>
<ul>
<li><p>为什么已经有了超时重传：还要有快速重传</p>
<ul>
<li>其实是这样，就是说，由于超时重传，是要等一段时间才重传，其实效率并不是很高，所以网络设计们采取了快速重传机制这样效率更高</li>
</ul>
</li>
<li><p>什么时候会触发快速重传机制，比如此时发送方发送了三个数据包（1，2，3），其中2没有发送出去，接收方只发出基于第一个数据包的确认号，并且重复了三次（不包含第一次的确认，再此基础上，再来三次确认）这个确认号，就是告诉发送方，2这个数据包丢失了，需要对方重新发送，于是触发了发送方的快速重传机制，发送方会重新传送2这个丢失数据包</p>
</li>
<li><p>特点</p>
<ul>
<li>接受方会重复发送丢失包的确认号</li>
</ul>
</li>
<li><p>缺点</p>
<ul>
<li>这里存在一个问题就是，发送方是依据所收到的确认号，来确认接受方是否收到了数据，但是此时发送方只接受到了丢失包的确认号，它也不知道之后的数据包到底发送成功没；————于是Sack就是来解决这个问题的</li>
</ul>
</li>
</ul>
</li>
<li><p>SACK</p>
<ul>
<li>这里我通俗来讲一下，就是说为了能够让对方知道自己到底具体传哪些丢失的数据包，每次服务器发来的确认号，还会带上服务器已收到的最大 连续的包的序列号</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="滑动窗口"><a href="#滑动窗口" class="headerlink" title="滑动窗口"></a>滑动窗口</h2><h3 id="为什么要有滑动窗口"><a href="#为什么要有滑动窗口" class="headerlink" title="为什么要有滑动窗口"></a>为什么要有滑动窗口</h3><ul>
<li><p>为了提升网络传输效率</p>
<ul>
<li><p>原因在于tcp为了能够实现可靠信息的传输：为每一个数据包都进行确认，那么这就导致了，数据包往返时间越长，网路通信效率就会大幅度的降低（不是很理解网络吞吐量），所以才引用到了窗口</p>
</li>
<li><p>怎么做的：就是为tcp报文设立一个滑动窗口，这个滑动窗口的大小由服务器决定/并且，是无需等待对方的确认，而可以继续发送的数据包</p>
<ul>
<li><p>发送窗口</p>
<ul>
<li>已收到确认的序列号</li>
<li>已经发送但未收到确认的序列号（这个窗口的尺寸大小是服务器能接受的）</li>
<li>还有一段未发送，但在接收方能力范围内的数据段（又称可用窗口的大小）（未发送但是可发送的包）</li>
<li>超出了服务器所能接受的序列号</li>
</ul>
</li>
<li><p>接收方滑动窗口</p>
<ul>
<li>已收到数据，并且已经确认的数据段</li>
<li>未收到数据但是可以接受的窗口大小</li>
<li>未收到数据但是无法确认的数据段</li>
</ul>
</li>
<li><p>那有一个问题就是如果中途其中一个确认号丢失了，怎么办</p>
<ul>
<li>滑动窗口中的序列号是有序的，这也就意味着确认号也是有序的，只要缺失的那个序列号的确认号之后的确认号得到了确认，那么就是一种累计确认，只要某个确认号确认后默认之前的所有序列号都得到了确认（这里我对于序列号不是很理解）</li>
</ul>
</li>
<li><p>滑动窗口是怎么个滑动法</p>
<ul>
<li>就是服务器发来确认号后，发送方的滑动窗口相应的就会滑动和确认号序列相同的距离，意味着可用窗口增加了</li>
</ul>
</li>
<li><p>补充：滑动窗口大小的含义：指的是发送方不必等待对方的确认，可以发送的最大报文段</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="流量控制"><a href="#流量控制" class="headerlink" title="流量控制"></a>流量控制</h2><h3 id="就是来控制发送方发送数据的速率，防止超出接收方处理接收数据的能力"><a href="#就是来控制发送方发送数据的速率，防止超出接收方处理接收数据的能力" class="headerlink" title="就是来控制发送方发送数据的速率，防止超出接收方处理接收数据的能力"></a>就是来控制发送方发送数据的速率，防止超出接收方处理接收数据的能力</h3><h3 id="依赖于滑动窗口"><a href="#依赖于滑动窗口" class="headerlink" title="依赖于滑动窗口"></a>依赖于滑动窗口</h3><ul>
<li>意思就是通过告知发送方自己的接收窗口大小rwnd来，控制发送方的数据–从而实现了流量控制</li>
</ul>
<h3 id="那所谓的窗口是什么：就是接收方最大所能处理的数据量"><a href="#那所谓的窗口是什么：就是接收方最大所能处理的数据量" class="headerlink" title="那所谓的窗口是什么：就是接收方最大所能处理的数据量"></a>那所谓的窗口是什么：就是接收方最大所能处理的数据量</h3><h3 id="窗口关闭"><a href="#窗口关闭" class="headerlink" title="窗口关闭"></a>窗口关闭</h3><ul>
<li>主要就是在接收方发送给发送方自己最新的接收窗口大小的时候，发生了丢失–tcp的可靠传输没有对窗口大小的消息产生作用</li>
<li>双方都在等待对方</li>
</ul>
<h2 id="拥塞控制"><a href="#拥塞控制" class="headerlink" title="拥塞控制"></a>拥塞控制</h2><h3 id="拥塞控制主要是避免发送方不断的发送数据而导致网络拥塞"><a href="#拥塞控制主要是避免发送方不断的发送数据而导致网络拥塞" class="headerlink" title="拥塞控制主要是避免发送方不断的发送数据而导致网络拥塞"></a>拥塞控制主要是避免发送方不断的发送数据而导致网络拥塞</h3><h3 id="那为了避免拥塞，需要客户端维护一个拥塞窗口（CWND）"><a href="#那为了避免拥塞，需要客户端维护一个拥塞窗口（CWND）" class="headerlink" title="那为了避免拥塞，需要客户端维护一个拥塞窗口（CWND）"></a>那为了避免拥塞，需要客户端维护一个拥塞窗口（CWND）</h3><h3 id="ssthresh-阈值"><a href="#ssthresh-阈值" class="headerlink" title="ssthresh//阈值"></a>ssthresh//阈值</h3><h3 id="有哪些算法"><a href="#有哪些算法" class="headerlink" title="有哪些算法"></a>有哪些算法</h3><ul>
<li><p>慢开始</p>
<ul>
<li>就是一开始每当收到一个ack，其cwnd加一个，第二轮收到2个，cwnd就为2，第三轮次收到4个ack，cwnd为4,这样呈现了指数增加</li>
</ul>
</li>
<li><p>拥塞避免</p>
<ul>
<li><p>但是随着客户端发送数据数量的增加</p>
<ul>
<li><p>一定会到达阈值</p>
<ul>
<li>进入拥塞避免后每收到一个确认，cwnd只加1/cwnd，比如当前收到了8个确认，一个加1/8,这次拥塞窗口仅加了一次，之后就是线性增长了</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p>拥塞发生</p>
<ul>
<li><p>你即便是再怎么避免，还是会导致网络拥塞</p>
<ul>
<li><p>超时重传</p>
<ul>
<li><p>进入拥塞避免算法</p>
<ul>
<li><p>但是这里有一个问题就是说：每次一进入拥塞避免，拥塞窗口，直接就初始化为1</p>
</li>
<li><p>就算网络不拥堵，但是会卡顿，因为所能发送的数据包骤减</p>
</li>
<li><p>此时客户端认为其实网络情况也没有那么糟糕</p>
<ul>
<li>ssthresh=cwnd/2</li>
<li>初始化cwnd=1</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p>快重传</p>
<ul>
<li>cwnd/2</li>
<li>sshred=cwnd/2</li>
</ul>
</li>
<li><p>快恢复</p>
<ul>
<li><p>触发快重传后，紧接着执行</p>
<ul>
<li><p>cwnd=ssthred+3(ack报文）</p>
<ul>
<li>很明显拥塞窗口已经大于阈值了：之后再次进入线性拥塞避免算法</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2020/12/19/V8%E5%BC%95%E6%93%8E%E5%A6%82%E4%BD%95%E6%9D%A5%E4%BC%98%E5%8C%96%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6%E6%9C%BA%E5%88%B6%E7%9A%84%C2%B7/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="John Doe">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/12/19/V8%E5%BC%95%E6%93%8E%E5%A6%82%E4%BD%95%E6%9D%A5%E4%BC%98%E5%8C%96%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6%E6%9C%BA%E5%88%B6%E7%9A%84%C2%B7/" class="post-title-link" itemprop="url">优化垃圾回收机制</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2020-12-19 12:20:05" itemprop="dateCreated datePublished" datetime="2020-12-19T12:20:05+08:00">2020-12-19</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">In</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/v8%E5%BC%95%E6%93%8E/" itemprop="url" rel="index"><span itemprop="name">v8引擎</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="V8引擎如何来优化垃圾回收机制的·"><a href="#V8引擎如何来优化垃圾回收机制的·" class="headerlink" title="V8引擎如何来优化垃圾回收机制的·"></a>V8引擎如何来优化垃圾回收机制的·</h1><h2 id="相应优化算法"><a href="#相应优化算法" class="headerlink" title="相应优化算法"></a>相应优化算法</h2><h3 id="全停顿算法"><a href="#全停顿算法" class="headerlink" title="全停顿算法"></a>全停顿算法</h3><ul>
<li><p>js是单线程，并且js执行和垃圾回收机制任务都在主线上，js执行就会被挂起，导致全停顿</p>
</li>
<li><p>Subtopic</p>
</li>
<li><p>并行回收</p>
<ul>
<li>副垃圾回收机制–采取专门用来清理新生代对象</li>
<li>这些辅助线程，也会来帮忙将对象区域的数据转移到空闲区域</li>
<li>Subtopic</li>
<li>弊端还是全停顿，对于老生代对象还是会非常影响效率</li>
</ul>
</li>
</ul>
<h3 id="增量标记算法"><a href="#增量标记算法" class="headerlink" title="增量标记算法"></a>增量标记算法</h3><ul>
<li><p>增量回收</p>
<ul>
<li><p>分治的思想</p>
</li>
<li><p>就是说将完整的标记清除任务分解为一个个小任务，然后穿插着在主线程上进行</p>
</li>
<li><p>怎么实现的</p>
<ul>
<li><p>如何来实现垃圾回收机制的暂停和恢复</p>
<ul>
<li><p>三色标记法</p>
<ul>
<li><p>黑色</p>
<ul>
<li>能够被GCroot对象遍历到</li>
</ul>
</li>
<li><p>白色</p>
<ul>
<li>无法被GCroot对象遍历到–会被清除</li>
</ul>
</li>
<li><p>灰色</p>
<ul>
<li><p>被GCroot对象遍历到，但是子节点还未被处理</p>
</li>
<li><p>V8的垃圾回收器，会来判断此时有没有灰色标记</p>
<ul>
<li><p>有</p>
<ul>
<li>下次恢复垃圾回收机制时就从灰色的标记开始，继续标记</li>
</ul>
</li>
<li><p>没有</p>
<ul>
<li>直接开始清除</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p>那这里有一个问题如果中途，已经被标记的变量，被改变</p>
<ul>
<li>原来被标记为黑色–现在改变后变白色了</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="重点：并发回收机制"><a href="#重点：并发回收机制" class="headerlink" title="重点：并发回收机制"></a>重点：并发回收机制</h2><h3 id="不管是增量回收还是-并行回收，都是运行在主线程上"><a href="#不管是增量回收还是-并行回收，都是运行在主线程上" class="headerlink" title="不管是增量回收还是/并行回收，都是运行在主线程上"></a>不管是增量回收还是/并行回收，都是运行在主线程上</h3><h3 id="那么如何来实现在不阻塞主线程的基础上来，实现垃圾回收"><a href="#那么如何来实现在不阻塞主线程的基础上来，实现垃圾回收" class="headerlink" title="那么如何来实现在不阻塞主线程的基础上来，实现垃圾回收-"></a>那么如何来实现在不阻塞主线程的基础上来，实现垃圾回收-</h3><h3 id="简单来讲就是主线程只进行js代码的执行，辅助线程来实现垃圾回收"><a href="#简单来讲就是主线程只进行js代码的执行，辅助线程来实现垃圾回收" class="headerlink" title="简单来讲就是主线程只进行js代码的执行，辅助线程来实现垃圾回收"></a>简单来讲就是主线程只进行js代码的执行，辅助线程来实现垃圾回收</h3><h3 id="Subtopic"><a href="#Subtopic" class="headerlink" title="Subtopic"></a>Subtopic</h3><h2 id="主垃圾回收机制采取了三种机制"><a href="#主垃圾回收机制采取了三种机制" class="headerlink" title="主垃圾回收机制采取了三种机制"></a>主垃圾回收机制采取了三种机制</h2>
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://example.com/2020/12/19/http(%E4%BA%8C%E6%AC%A1%E5%A4%8D%E7%9B%98%EF%BC%89/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="John Doe">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/12/19/http(%E4%BA%8C%E6%AC%A1%E5%A4%8D%E7%9B%98%EF%BC%89/" class="post-title-link" itemprop="url">HTTP</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2020-12-19 12:20:05" itemprop="dateCreated datePublished" datetime="2020-12-19T12:20:05+08:00">2020-12-19</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">In</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/HTTP/" itemprop="url" rel="index"><span itemprop="name">HTTP</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="http-二次复盘）"><a href="#http-二次复盘）" class="headerlink" title="http(二次复盘）"></a>http(二次复盘）</h1><h2 id="http-发展历程"><a href="#http-发展历程" class="headerlink" title="http/发展历程"></a>http/发展历程</h2><h3 id="http1-1"><a href="#http1-1" class="headerlink" title="http1.1"></a>http1.1</h3><ul>
<li><p>优势/主要是针对其格式方面的</p>
<ul>
<li><p>简单</p>
<ul>
<li>只由报文首部（由简单的文本形式构成）和报文主体来构成，结构简单</li>
</ul>
</li>
<li><p>灵活易扩展</p>
<ul>
<li><p>没有对http请求的方法/响应码做死规定，开发人员可以进行扩展</p>
</li>
<li><p>它的灵活性还体现在，它本身是在应用层的/之下的其它层可以随意变化</p>
<ul>
<li><p>https</p>
<ul>
<li>直接就在http和tcp之间加入了TLS/SSL安全传输层</li>
</ul>
</li>
<li><p>http3.0</p>
<ul>
<li>直接将tcp层换为了UDP层</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p>跨平台</p>
<ul>
<li>移动端pc端/游戏</li>
</ul>
</li>
</ul>
</li>
<li><p>弊端</p>
<ul>
<li><p>无状态</p>
<ul>
<li>怎么解决这个问题/cookie 技术</li>
</ul>
</li>
<li><p>明文传输</p>
<ul>
<li>用https协议解决</li>
</ul>
</li>
</ul>
</li>
<li><p>性能</p>
<ul>
<li><p>长连接</p>
<ul>
<li>客户端在向服务器发出http请求的时候，之前要来建立tcp连接–你想想，你稳定连接都没有来建立怎么来发送请求//这里有问题</li>
<li>早在1.0版本的时候，每发一个请求，都要来建立一个tcp链接，那么就非常的消耗资源，那么为了解决这个问题，http1.1版本用长链接，只要双方没有主动断开连接的意愿，那么这个连接就不会断开//完全正确</li>
</ul>
</li>
<li><p>管道网络传输</p>
<ul>
<li><p>正是因为长连接给管道网络传输创造了条件</p>
</li>
<li><p>就是说在一次tcp连接中，同时发出多个http串行请求//并不是在多路复用</p>
<ul>
<li>这里我需要来补充一点就是说，虽然可以同时发出多个请求，但是服务器这里接收还是按照顺序的，也就是说还是会阻塞的</li>
</ul>
</li>
<li><p>想象这个管道，里面有好多好多请求，管道里通着水。</p>
</li>
</ul>
</li>
<li><p>弊端：队头阻塞</p>
<ul>
<li><p>怎么会出现这个状况</p>
<ul>
<li>原因就在于http1.1版本采取的是串行请求，可以理解为顺序请求，只要第一个请求发出，但是因为某种原因而被阻塞了，那么之后的请求也都会被阻塞，也就是说客户端会一直收不到想要的数据</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="HTTPS"><a href="#HTTPS" class="headerlink" title="HTTPS"></a>HTTPS</h3><h3 id="http2-0"><a href="#http2-0" class="headerlink" title="http2.0"></a>http2.0</h3><ul>
<li><p>特点</p>
<ul>
<li><p>报文格式采取二进制</p>
<ul>
<li><p>构成</p>
<ul>
<li>头信息帧</li>
<li>数据帧</li>
</ul>
</li>
<li><p>这样做的目的就是为了能够方便计算机接收数据</p>
</li>
</ul>
</li>
<li><p>报文的格式是一种数据流</p>
<ul>
<li><p>报文传输的过程是一种双向数据传输流</p>
<ul>
<li>彼此之间是以流的形式去传输的</li>
</ul>
</li>
</ul>
</li>
<li><p>多路复用</p>
<ul>
<li>其实就是http多个请求基于同一个tcp连接</li>
<li>移除了1.1的串行请求：也就是说可以并发接收请求（有点像异步，任何一个请求都不会阻塞其它请求）</li>
</ul>
</li>
<li><p>头部压缩技术</p>
<ul>
<li><p>为什么要有头部压缩技术–其实是因为header 里面存有一些固定的头字段：useragent cookie accept 等这些多达几百字节，并且还有好多的重复头部</p>
</li>
<li><p>HPACK压缩算法，废除了http1.1的起始行的概念，它将原来的url，请求头方法，全部转换为伪头字段,以冒号（：）开头eg:   :method, :status </p>
</li>
<li><p>给那些重复的字段信息，引入了静态表，双方会共同维护这个静态表</p>
<ul>
<li>但是如果没有在静态表里找到我想要的信息，之后会紧跟着一个动态表，会不断的更新信息</li>
<li>优势：减少请求的头部开销，提高网络传输的效率，如果有重复的头部信息，直接带上索引号就可以解决了</li>
</ul>
</li>
</ul>
</li>
<li><p>安全性</p>
<ul>
<li><p>基于TLS握手所构成的</p>
<ul>
<li>那为了能够区别于https，会在tls握手结束后发给服务器一个连接前言，告诉服务器，我是http2协议而不是其它的协议</li>
</ul>
</li>
</ul>
</li>
<li><p>服务端推送</p>
</li>
</ul>
</li>
<li><p>弊端</p>
<ul>
<li><p>其实这里只是解决了部分的对头阻塞（应用层，别忘了还有传输层的）问题：并没有完全的解决—为什么下层tcp就还是会出现队头阻塞问题-</p>
<ul>
<li>因为一旦tcp报文，有丢失直接触发了tcp的重传机制-服务器只有接收到了丢失的报文，才会去继续接收—也就是说其它报文来了也没用</li>
</ul>
</li>
</ul>
</li>
<li><p>核心：流与多路复用</p>
<ul>
<li><p>本质是双向的数据传输序列</p>
<ul>
<li>同一个id号</li>
</ul>
</li>
<li><p>流ID</p>
<ul>
<li><p>由于多路复用的问题-多个请求是乱发的</p>
<ul>
<li>并且发请求的时候头帧/数据帧是打乱的，但是属于同一个请求/回应的流的会分配相同的id</li>
<li>接收方根据流id重组，排序收来的帧，形成流</li>
</ul>
</li>
<li><p>但是由于http2里帧结构会有流标识符</p>
</li>
<li><p>具体就是当我此时发出一个请求后，这个请求会有一个流id，响应信息也会有一个与之相同的流id,这就意味同属一个流，即便</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="http3-0版本"><a href="#http3-0版本" class="headerlink" title="http3.0版本"></a>http3.0版本</h3><ul>
<li><p>从根本上解决了队头阻塞</p>
<ul>
<li><p>为什么</p>
<ul>
<li>由于tcp建立的是可靠连接，所以当http包丢了会触发重传机制–也就会阻塞其它http请求–http2.0并没有完全的解决队头阻塞的问题</li>
</ul>
</li>
</ul>
</li>
<li><p>所以http下层的传输层采取了UDP</p>
<ul>
<li>udp采取的是不可靠传输–发了不管对方是否接收到–一个流阻塞了，仅阻塞这个流，其它流根本就不管</li>
</ul>
</li>
<li><p>安全性</p>
<ul>
<li><p>基于最新的TLS1.3</p>
<ul>
<li>但是，会将其警报消息，握手消息，封装为自己的QUIC帧</li>
<li>也就是说并不是完全的依赖于TLS协议</li>
</ul>
</li>
</ul>
</li>
<li><p>为什么要用不透明的ID意义是什么</p>
</li>
</ul>
<h2 id="请求方法"><a href="#请求方法" class="headerlink" title="请求方法"></a>请求方法</h2><h3 id="GET"><a href="#GET" class="headerlink" title="GET"></a>GET</h3><ul>
<li><p>安全幂等</p>
<ul>
<li>这里我印象中好像是因为是只读操作所以，不会对服务器的资源造成影响，所以是安全的/至于幂等应该是针对服务器来讲的，就是说多次操作不会造成服务器的资源改变//幂等可以这样来理解//所谓幂就是多次操作的意思</li>
</ul>
</li>
</ul>
<h3 id="POST"><a href="#POST" class="headerlink" title="POST"></a>POST</h3><ul>
<li>不安全也不幂等</li>
</ul>
<h3 id="put：完全更新"><a href="#put：完全更新" class="headerlink" title="put：完全更新"></a>put：完全更新</h3><ul>
<li>当需要修改信息时需要把整个字段发送给后端</li>
</ul>
<h3 id="patch"><a href="#patch" class="headerlink" title="patch"></a>patch</h3><ul>
<li><p>局部更新</p>
<ul>
<li>只需要把要更新的字段发送给后端，不需要把整个字段全部发送给后端，所以减少资源消耗</li>
</ul>
</li>
</ul>
<h2 id="状态码"><a href="#状态码" class="headerlink" title="状态码"></a>状态码</h2><h3 id="它有哪些分类呢"><a href="#它有哪些分类呢" class="headerlink" title="它有哪些分类呢"></a>它有哪些分类呢</h3><ul>
<li><p>1××</p>
<ul>
<li>服务器收到了客户端的请求（但是还没处理）</li>
</ul>
</li>
<li><p>2××</p>
<ul>
<li>收到了请求，并且产生了回应</li>
</ul>
</li>
<li><p>3××</p>
<ul>
<li>资源重定向，意思就是，服务器这里没有客户端想要的资源，响应头部包含了一个location,(告诉客户端你想要的资源都在这个地址去寻找吧）</li>
</ul>
</li>
<li><p>4××</p>
<ul>
<li>客户端错误（意思就是客户端访问了服务器所没有的资源）</li>
</ul>
</li>
<li><p>5××</p>
<ul>
<li>服务器错误（就是服务器自己出现了bug无法返回客户端所需要的资源)</li>
</ul>
</li>
</ul>
<h3 id="常见状态码"><a href="#常见状态码" class="headerlink" title="常见状态码"></a>常见状态码</h3><ul>
<li><p>200</p>
<ul>
<li>成功</li>
</ul>
</li>
<li><p>301</p>
<ul>
<li>永久重定向，就是说当第一次服务器给了客户端这个重定向地址之后，客户端再次访问的时候就会直接去访问</li>
</ul>
</li>
<li><p>302</p>
<ul>
<li>临时重定向，这个是每次客户端访问还是要访问原地址，之后再到重定向的地址eg:访问百度搜索引擎里的内容，都是先跳转至百度网址，然后再跳转至重定向的地址</li>
</ul>
</li>
<li><p>307</p>
<ul>
<li>也是重定向，但是这个是不会去改变请求方法的，这也是为什么既生302又为何有307</li>
</ul>
</li>
<li><p>304</p>
<ul>
<li>距离上次请求网页的内容不会改变，所以服务器不会来返回的内容，这个时候客户端应该是直接向本地缓存请求数据了</li>
</ul>
</li>
<li><p>404</p>
<ul>
<li>客户端错误，资源未找到，死就死吧</li>
</ul>
</li>
<li><p>500</p>
<ul>
<li>服务器本身错误</li>
</ul>
</li>
<li><p>504</p>
<ul>
<li><p>网关超时-服务器内部网络超时</p>
<ul>
<li>联想自己信息上报的。我死了。</li>
<li>网关或代理服务器向上游服务器，没有及时收到回应</li>
</ul>
</li>
</ul>
</li>
<li><p>502</p>
<ul>
<li>网关/代理服务器向上游服务器发送请求收到无效的回应</li>
</ul>
</li>
</ul>
<h2 id="组成"><a href="#组成" class="headerlink" title="组成"></a>组成</h2><h3 id="所谓超文本"><a href="#所谓超文本" class="headerlink" title="所谓超文本"></a>所谓超文本</h3><ul>
<li>就是图片/视频/连接</li>
<li>核心，在于有链接跳转至另一个超文本</li>
</ul>
<h3 id="传输"><a href="#传输" class="headerlink" title="传输"></a>传输</h3><ul>
<li><p>两点之间进行传输</p>
<ul>
<li>你怎么理解它这个两点之间的传输</li>
</ul>
</li>
</ul>
<h3 id="它是一种协议"><a href="#它是一种协议" class="headerlink" title="它是一种协议"></a>它是一种协议</h3><ul>
<li><p>它是一种双向传输协议</p>
<ul>
<li>就是说客户端与服务器通信，客户端发送请求，服务器响应请求/双向的</li>
</ul>
</li>
</ul>
<h2 id="Header"><a href="#Header" class="headerlink" title="Header"></a>Header</h2><h3 id="requiredheader"><a href="#requiredheader" class="headerlink" title="requiredheader"></a>requiredheader</h3><ul>
<li><p>Accept</p>
<ul>
<li>浏览器发出http的请求的目的是什么是不是在请求资源–但是浏览器并不是能够接受所有资源格式//  Accept 浏览器能够接受的资源格式</li>
</ul>
</li>
<li><p>Accept-encoding</p>
<ul>
<li><p>那现在浏览器已经能够接受到了资源–但是客户端的资源总是有限的此时服务器需要来压缩资源再发送给浏览器 </p>
<ul>
<li>那我总得告诉一下服务器我能够接受的压缩算法吧 Accept-encoding</li>
</ul>
</li>
</ul>
</li>
<li><p>Cookie</p>
<ul>
<li>Subtopic</li>
</ul>
</li>
<li><p>Host</p>
<ul>
<li>服务器的ip地址和端口号</li>
</ul>
</li>
<li><p>useragent</p>
<ul>
<li><p>包含着浏览器的信息/操作系统的信息</p>
<ul>
<li>比如我是windows/chrome浏览器</li>
</ul>
</li>
</ul>
</li>
<li><p>connection: keep-alive</p>
<ul>
<li>告诉服务器采取长连接模式</li>
</ul>
</li>
<li><p>Authorization-Bearer<token></p>
<ul>
<li>鉴权的责任-就交给熊大（er人）吧</li>
</ul>
</li>
<li><p>if-none-match</p>
</li>
<li><p>if-modify-since</p>
</li>
</ul>
<h3 id="responseheader"><a href="#responseheader" class="headerlink" title="responseheader"></a>responseheader</h3><ul>
<li><p>content-type</p>
<ul>
<li>服务器返回给浏览器的资源格式</li>
</ul>
</li>
<li><p>content-size</p>
<ul>
<li>返回的数据字节数</li>
</ul>
</li>
<li><p>content-Length</p>
<ul>
<li>返回的数据多少字节</li>
</ul>
</li>
<li><p>content-encoding</p>
<ul>
<li>服务器要告知我所采用的浏览器压缩格式目的是方便浏览器根据这个格式解压缩</li>
</ul>
</li>
<li><p>cache-control</p>
<ul>
<li><p>no-cache</p>
<ul>
<li>Subtopic</li>
</ul>
</li>
<li><p>no-store</p>
</li>
<li><p>publice</p>
</li>
<li><p>private</p>
</li>
</ul>
</li>
<li><p>Etag</p>
</li>
<li><p>connection: keep-alive</p>
<ul>
<li>服务器采取长连接模式</li>
</ul>
</li>
<li><p>LastModify</p>
</li>
<li><p>子主题</p>
</li>
</ul>
<h2 id="响应格式"><a href="#响应格式" class="headerlink" title="响应格式"></a>响应格式</h2><h3 id="响应行"><a href="#响应行" class="headerlink" title="响应行"></a>响应行</h3><ul>
<li>响应码</li>
<li>协议版本号</li>
</ul>
<h3 id="响应头部"><a href="#响应头部" class="headerlink" title="响应头部"></a>响应头部</h3><ul>
<li>access-control-allow-origin</li>
<li>cache-control</li>
</ul>
<h3 id="响应体"><a href="#响应体" class="headerlink" title="响应体"></a>响应体</h3><ul>
<li>对方请求的信息</li>
</ul>
<h2 id="请求格式"><a href="#请求格式" class="headerlink" title="请求格式"></a>请求格式</h2><h3 id="请求行"><a href="#请求行" class="headerlink" title="请求行"></a>请求行</h3><ul>
<li>请求方法</li>
<li>URL</li>
<li>协议版本</li>
</ul>
<h3 id="请求头部"><a href="#请求头部" class="headerlink" title="请求头部"></a>请求头部</h3><ul>
<li><p>就是header</p>
<ul>
<li>以键值对存储的</li>
</ul>
</li>
</ul>
<h3 id="请求正文"><a href="#请求正文" class="headerlink" title="请求正文"></a>请求正文</h3><ul>
<li>比如post要去携带一些信息</li>
</ul>
<h3 id="联想最近行情咋样，"><a href="#联想最近行情咋样，" class="headerlink" title="联想最近行情咋样，"></a>联想最近行情咋样，</h3>
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




  <nav class="pagination">
    <span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="extend next" rel="next" href="/page/2/"><i class="fa fa-angle-right" aria-label="Next page"></i></a>
  </nav>

</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">John Doe</span>
</div>
  <div class="powered-by">Powered by <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/pisces/" rel="noopener" target="_blank">NexT.Pisces</a>
  </div>

    </div>
  </footer>

  
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/next-boot.js"></script>

  




  





</body>
</html>
